<template>
  <div>
    <el-form
      :inline="true"
      :model="formInline"
      class="form-inline"
      ref="formInline"
      :rules="rules">
      <!-- 下拉框区域 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="学科" prop="subjectID">
            <el-select v-model="formInline.subjectID" placeholder="请选择" @change="getOtherList">
              <el-option
                v-for="(item, index) in subList"
                :key="index"
                :label="item.subjectName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录" prop="catalogID">
            <el-select v-model="formInline.catalogID" placeholder="请选择">
              <el-option
                v-for="(item, index) in direcList"
                :key="index"
                :label="item.directoryName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签" prop="tags">
            <el-select v-model="formInline.tags" placeholder="请选择">
              <el-option
                v-for="(item, index) in tagList"
                :key="index"
                :label="item.tagName"
                :value="item.tagName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字" prop="keyword">
            <el-input v-model="formInline.keyword" placeholder="根据文章标题搜索"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="试题类型" prop="questionType">
            <el-select v-model="formInline.questionType" placeholder="请选择">
              <el-option label="单选" value="1"></el-option>
              <el-option label="多选" value="2"></el-option>
              <el-option label="简答" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度" prop="difficulty">
            <el-select v-model="formInline.difficulty" placeholder="请选择">
              <el-option label="简单" value="1"></el-option>
              <el-option label="一般" value="2"></el-option>
              <el-option label="困难" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
        <!-- o2o，外包服务，企业服务，互联网金融，企业咨询，互联网，电子商务,其他 -->
          <el-form-item label="方向" prop="direction">
            <el-select v-model="formInline.direction" placeholder="请选择">
              <el-option label="o2o" value="o2o"></el-option>
              <el-option label="外包服务" value="外包服务"></el-option>
              <el-option label="企业服务" value="企业服务"></el-option>
              <el-option label="互联网金融" value="互联网金融"></el-option>
              <el-option label="企业咨询" value="企业咨询"></el-option>
              <el-option label="互联网" value="互联网"></el-option>
              <el-option label="电子商务" value="电子商务"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人" prop="creatorID">
            <el-select v-model="formInline.creatorID" placeholder="请选择">
              <el-option
                v-for="(item, index) in userList"
                :key="index"
                :label="item.username"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="题目备注" prop="remarks">
            <el-input v-model="formInline.remarks"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称" prop="shortName">
            <el-input v-model="formInline.shortName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市" prop="province">
            <el-select
              style="width: 48%; margin-right: 2%;"
              v-model="formInline.province"
              placeholder="请选择"
              @change="changeFn"
            >
              <el-option
                v-for="(item, index) in provincesList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-select style="width: 48%" v-model="formInline.city" placeholder="请选择">
              <el-option
                v-for="(item, index) in citysList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item style="padding-left: 50px;">
            <el-button @click="resetForm">清除</el-button>
            <el-button type="primary" @click="onSearch">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 按钮区域 -->

    </el-form>
  </div>
</template>

<script>
import { getUserList } from '@/api/user'
import { getSubjectList, getCatalogueList, getLabelList } from '@/api/subjectmanage'
import PageTools from './pageTools.vue'
import { provinces, citys } from '@/api/citys'
export default {
  name: 'SearchQuest',
  components: {
    PageTools
  },
  data() {
    return {
      provincesList: provinces(), // 城市
      citysList: [], // 地区
      subList: [],
      direcList: [],
      tagList: [],
      userList: [],
      formInline: {
        keyword: '',
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: '',
        province: '',
        city: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: null,
        catalogID: null
      },
      rules: {
        keyword: [],
        subjectID: [],
        difficulty: [],
        questionType: [],
        tags: [],
        province: [],
        city: [],
        remarks: [],
        shortName: [],
        direction: [],
        creatorID: [],
        catalogID: []
      },
    }
  },

  methods: {
    resetForm() {
      this.$nextTick(()=>{
        this.$refs.formInline.resetFields()
      })
    },
    onSearch() {
      if(Object.values(this.formInline).some(item => item!== null && item !== '')){
        const obj = {}
        Object.keys(this.formInline).forEach((item)=> {
          if(this.formInline[item] !== null && this.formInline[item] !== ''){
            console.log(item, this.formInline[item])
            obj[item] = this.formInline[item]
          }else {
            return
          }
        })
        this.$emit('onSearch', obj)
      }else {
        this.$emit('onSearch')
      }
    },
    // 处理头部表单查询
    // 获取学科列表
    async getSubList() {
      const res = await getSubjectList({page: 1, pagesize: 999})
      this.subList = res.items
    },
    getOtherList() {
      this.getCatList()
      this.getLabList()
    },
    async getCatList() {
      const res = await getCatalogueList({page: 1, pagesize: 999, subjectID: this.formInline.subjectID})
      this.direcList = res.items
    },
    async getLabList() {
      const res = await getLabelList({page: 1, pagesize: 999, subjectID: this.formInline.subjectID})
      this.tagList = res.items
    },
    async getUsersList() {
      const res = await getUserList({page: 1, pagesize: 999})
      this.userList = res.list
    },
    changeFn () {
      // 获取地区赋值给本地
      this.citysList = citys(this.formInline.province)
    }
  },
  created() {
    this.getSubList()
    this.getUsersList()
    this.resetForm()
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item{
  padding: 0;
  width: 100%;
}
::v-deep .el-form-item__label{
  width: 100px;
}
::v-deep .el-form-item__content{
  width: 180px;
}
</style>
